<template>
  <view class="Water">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="form">
        <view class="form-item-title">
          <view class="title">
            <view class="text">账户信息</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 户主姓名 </view>
            <input class="input" type="text" placeholder="请填写" :value="countInfo.accountName"
              @change="changeAccountName" />
          </view>
          <view class="line" />
        </view>

        <!-- 银行名称 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 银行名称 </view>

            <picker style="flex: 1" @change="bindPickerChange" :value="countInfo.index" :range="bankArr"
              range-key="bankName">
              <view class="desc"> {{ countInfo.bankLabel ? countInfo.bankLabel : '请选择银行' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <view class="form-item">
          <view class="item">
            <view class="label"> 开户行 </view>
            <view class="i_box">
              <input type="text" placeholder="请输入" :value="countInfo.branchName" @input="changeBankBranch">
              <view v-if="showBranchNameList" class="branchNameListSty">
                <view v-if="branchNameList.length" class="b_item">
                  <view v-for="item in branchNameList" :key="item" @click="handleSelectName(item)">
                    {{ item.branchName }}
                  </view>
                </view>
                <view v-else class="b_text">无数据</view>
              </view>
            </view>

            <!-- <picker style="flex: 1" @change="bindPickerChangeItem" :value="countInfo.indexItem"
              :range="countInfo.bankItemArr" range-key="branchName">
              <view class="desc descItem"> {{ countInfo.bankBranch ? countInfo.bankBranch : '请选择银行' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker> -->
          </view>

          <view class="line" />
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 银行账号 </view>
            <input class="input" type="text" placeholder="请输入" :value="countInfo.accountNumber"
              @input="changeAccountNumber" maxlength="19" />
          </view>
          <view class="line" />
        </view>
        <view class="form-item">
          <view class="item">
            <view class="label"> 银行预留手机号 </view>
            <input class="input" type="text" placeholder="请输入" :value="countInfo.phoneNumber" @change="changeAccountPhone"
              maxlength="11" />
          </view>
          <view class="line" />
        </view>
      </view>
      <view class="form-item-logo">
        <view class="item-inner" style="margin-top: 20rpx">
          <view class="label"> 银行卡照片 </view>
          <!-- <upload-img @change="uploadImgFn" :limit="1" title="支持上传jpg/png" :value="fileList">
            <image style="width: 100%; height: 100%; flex-shrink: 0"
              :src="countInfo.bankUrl || 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/18/514bd029aaa046e3a4749a6191d54ebd.png'"
              mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
          </upload-img> -->
          <view @click="selectRx">
            <view class="fileList">
              <view class="rx">
                <image class="" :src="countInfo.bankImg" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                  binderror="" bindload="" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="submit" @click="handleSave">
        <text class="text"> 保存 </text>
      </view>
      <view style="height: 200rpx" />
    </scroll-view>
  </view>
</template>

<script>
import { getAccountDetails, exitAccount } from "@/api/pages/mine.js"
import { getBankList, getBankListItem } from "@/api/common.js"
import uploadImg from "@/components/uploadImg/uploadImg";
import { verifyMobile } from '@/utils/toast'
import config from "../../../../../config";
import { getToken } from '@/utils/auth'

export default {
  components: { uploadImg },
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "银行账户",
      },
      value: "",
      code: "",
      bankArr: [], // 你的选项数组
      countInfo: {
        bankJobseekerId: '',
        seUserId: '',
        seUserName: '',
        phone: '',
        accountName: '',
        accountNumber: '',
        bank: '',
        bankLabel: '',
        branchName: '',
        bankBranch: '',
        index: '',
        phoneNumber: '',
        bankItemArr: [],
        bankLineNo: '',
        indexItem: [{ bank: '', bankLineNo: '', branchName: '' }],
        bankImg: 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/18/514bd029aaa046e3a4749a6191d54ebd.png'
      },
      fileList: [],
      showBranchNameList: false,
      branchNameList: []
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  mounted() {
    this.getAccountDetailsFun()
  },
  methods: {
    toPath(path) {
      if (path === "") return;

      uni.navigateTo({
        url: `/${path}`,
      });
    },

    confirm() { },
    //输入框触发事件
    changeAccountName(e) {
      this.countInfo.accountName = e.detail.value
    },
    changeBankBranch(e) {
      this.branchNameList = []
      this.countInfo.bankBranch = e.detail.value
      if (e.detail.value) {
        this.showBranchNameList = true
        this.countInfo.bankItemArr.forEach((res) => {
          if (res.branchName.indexOf(this.countInfo.bankBranch) !== -1) {
            this.branchNameList.push(res)
          }
        })
      } else {
        this.showBranchNameList = false
      }
    },
    //封装上传图片到服务器
    getImgUrlFun(tempFilePaths) {
      uni.uploadFile({
        url: config.baseUrl + '/xcx/common/upload',
        filePath: tempFilePaths,
        name: 'file',
        header: {
          "token": getToken(),
        },
        success: (suc) => {
          const infoData = JSON.parse(suc.data)
          console.log(222, infoData);
          this.countInfo.bankImg = infoData.data.url
        },
        fail: error => {
          console.log('失败', error);
        }
      })
    },
    // 获取上传状态
    selectRx() {
      uni.chooseMedia({
        count: 1,
        sourceType: ["album"], //从相册选择
        success: (chooseImageRes) => {
          console.log(chooseImageRes);
          if (chooseImageRes.tempFiles[0].size > 2097152) {
            uni.showToast({
              title: '图片不能超过2m,请重新选择',
              icon: 'none'
            })
            return
          }
          this.getImgUrlFun(chooseImageRes.tempFiles[0].tempFilePath)
        }
      });
    },
    // 选中分行
    handleSelectName(item) {
      this.countInfo.branchName = item.branchName
      this.countInfo.bankBranch = item.branchName
      this.countInfo.bankLineNo = item.bankLineNo
      this.showBranchNameList = false
    }
    ,
    changeAccountNumber(e) {
      this.countInfo.accountNumber = e.detail.value
      this.$forceUpdate();
      console.log(this.countInfo.accountNumber);
    },
    bindPickerChange(e) {
      let that = this
      this.showBranchNameList = false
      console.log(e, this.bankArr, this.countInfo.bank);
      this.countInfo.bank = this.bankArr[+(e.detail.value)].id;
      this.countInfo.bankLabel = this.bankArr[+(e.detail.value)].bankName;
      console.log(this.countInfo.bankLabel);
      getBankListItem(this.countInfo.bankLabel).then((res) => {
        this.$nextTick(() => {
          that.countInfo.bankItemArr = res.data
          console.log(that.countInfo.bankItemArr);
          // 解决数据更新但是dom没更新的问题
          this.$forceUpdate();
        })
      })
    },
    bindPickerChangeItem(e) {
      this.countInfo.bankBranch = this.countInfo.bankItemArr[+(e.detail.value)].branchName;
      this.countInfo.bankLineNo = this.countInfo.bankItemArr[+(e.detail.value)].bankLineNo;
    },
    changeAccountPhone(e) {
      this.countInfo.phoneNumber = e.detail.value
    },
    // 上传图片监听
    // uploadImgFn(data) {
    //   if (data && Array.isArray(data)) {
    //     this.fileList = data.map((v) => v.url);
    //     this.countInfo.bankUrl = data[0].url;
    //   }
    // },
    // 获取求职者银行账户信息和银行列表 --钱包
    getAccountDetailsFun() {
      getBankList().then((res) => {
        if (res.code === 200) {
          this.bankArr = res.data
        }
      })
      getAccountDetails().then((res) => {
        if (res.code === 200) {
          this.countInfo = res.data || this.countInfo
          this.countInfo.branchName = res.data.bankBranch
          this.countInfo.bankImg = res.data.bankUrl
          this.bankArr.forEach((res1, index) => {
            if (res.data.bank === res1.id) {
              this.countInfo.index = index
              this.countInfo.bankLabel = res1.bankName
              getBankListItem(this.countInfo.bankLabel).then((res) => {
                this.countInfo.bankItemArr = res.data || []
                this.countInfo.bankItemArr.forEach((z, index1) => {
                  if (z.branchName === this.countInfo.bankBranch) {
                    this.countInfo.indexItem = index1
                  }
                })
              })
            }
          })
        }
      })
    },
    // 修改账户信息
    handleSave() {
      if (verifyMobile(this.countInfo.phoneNumber)) {
        exitAccount({
          accountName: this.countInfo.accountName,
          accountNumber: this.countInfo.accountNumber,
          bank: +this.countInfo.bank,
          bankBranch: this.countInfo.bankBranch,
          bankUrl: this.countInfo.bankImg,
          phoneNumber: this.countInfo.phoneNumber,
          bankLineNo: this.countInfo.bankLineNo
        }).then((res) => {
          if (res.code === 200) {
            uni.showToast({ title: '保存成功' })
            setTimeout(function () {
              uni.navigateBack()
            }, 1000)
          }
        })
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.Water {
  height: 100vh;
  width: 100%;
  background-color: #ffffff;

  .scroll {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32rpx;

    .form {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }
    }

    .form-1 {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }


          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }

      .form-item-logo {
        position: relative;

        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;

          margin-left: 30rpx;
          margin-right: 24rpx;

          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;

            margin-right: 40rpx;
          }

          .support {
            font-weight: 500;
            font-size: 22rpx;
            color: #00000073;
            letter-spacing: 0;
          }

          .file {}
        }
      }
    }

    .submit {
      width: 420rpx;
      height: 88rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-top: 64rpx;

      .text {
        height: 45rpx;

        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        letter-spacing: 0;
      }
    }
  }
}

.descItem {
  width: 500rpx !important;
}

.i_box {
  position: relative;
  width: calc(100% - 180rpx);

  .branchNameListSty {
    position: absolute;
    top: 60rpx;
    left: 0;
    background: #fff;
    width: 500rpx;
    min-height: 120rpx;
    max-height: 400rpx;
    z-index: 99;
    border: 1px solid #e2e2e2;
    border-radius: 20rpx;
    overflow: auto;

    .b_item {
      color: #00000073;
      font-size: 24rpx;

      >view {
        margin: 20rpx;
      }
    }

    .b_text {
      min-height: 120rpx;
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.fileList {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .rx {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 322rpx;
    height: 260rpx;
    margin-right: 20rpx;

    image {
      width: 100%;
      height: 211rpx;
    }

    .text {
      margin-top: 16rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
    }
  }

  .gh {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 322rpx;
    height: 260rpx;

    image {
      width: 100%;
      height: 211rpx;
    }

    .text {
      margin-top: 16rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
    }
  }
}
</style>
